<template>
	<div class="wrapper">
		<u-navbar :background="navObj" :is-back="false" :is-fixed="true" height="75" width="100%">
			<view class="left-box" @tap="onClickLeft" style="padding-left: 41rpx">
				<u-icon name="arrow-left" size="40" color="#FFF"></u-icon>
			</view>

			<div class="title" style="
          padding-left: 230rpx;
          font-size: 36rpx;
          font-weight: 400;
          color: white;
        ">
				确认订单
			</div>
		</u-navbar>
		<div class="address-box" @click="clickToAddress()">
			<div class="loactionimg">
				<u-image width="27" class="uimage" height="36" src="/static/newImg/localtion.png"></u-image>
			</div>

			<div class="user-box">
				<div class="">
					<div v-if="!address.id">请选择地址</div>

					<div v-else>
						<div class="user-address">
							<!-- 省市区 -->

							<div>
								<span>{{ address.name }}</span>
								<span class="mobile">{{ address.mobile }}</span>
							</div>

							<span>
								<span>收货地址：</span>
								<span class="address-list">


									<span class="address-item">{{address.province}}</span>
									<span class="address-item">{{address.city}}</span>
									<span class="address-item">{{address.region}}</span>

								</span>
							</span>
							<!-- 详细地址 -->
							<div>
								{{ address.detailAddress }}
							</div>
							<!-- 姓名 手机号 -->
						</div>
					</div>
				</div>
				<u-icon name="arrow-right" style="color: #bababa"></u-icon>
			</div>
			<!-- 背景 -->
		</div>

		<view class="" v-for="product in product">
			<div class="probox">
				<div class="proboximg">
					<image :src="product.product.image" style="width: 137rpx;height: 137rpx;" mode=""></image>
				</div>
				<div class="proname">
					{{product.product.name}}
				</div>
				<div class="proprice">¥ {{product.currentskuid.price}}</div>
				<div class="proguige">{{product.currentskuid.name}}</div>
			</div>

			<div class="buymath">
				<div class="mathdiv">购买数量</div>
				<div class="numdiv"><uni-number-box class="uNumber" :min="0" :max="999"
						v-model="product.num"></uni-number-box></div>
			</div>
		</view>

		<div class="shuom">
			<div class="shuomItem">
				<span>商品总价: </span>
				<span>￥{{toltal}}</span>
			</div>

			<div class="shuomItem">
				<span>运费: </span>
				<span>￥0</span>
			</div>
		</div>

		<div class="zongjie">
			<div class="zongjie1">共{{productnum}}件商品 合计：</div>
			<div class="zongjie2">¥ {{toltal}}</div>
		</div>

		<div class="lastdiv" @click="handleGoOrder">确认订单，去支付</div>

	</div>
</template>
<script>
import {
	userOrder
} from '@/api/user.js'
import storage from '../../utils/storage';
import uniNumberBox from '@/components/uni-number-box'
export default {
	onLoad: function (val) {
		this.routerVal = val;
	},

	components: {
		uniNumberBox
	},
	data() {
		return {
			navObj: {
				backgroundColor: "rgb(25, 189, 93)",
			},
			routerVal: "",
			address: "",
			data: "",
			product: []
		};
	},

	async onShow() {

		if (uni.getStorageSync("currentAdress")) {
			this.address = uni.getStorageSync("currentAdress");
		}

		if (uni.getStorageSync("currentBuy")) {
			console.log(uni.getStorageSync("currentBuy").products)
			this.product = uni.getStorageSync("currentBuy").products
		}

		if (this.$store.state.isShowToast) {
			uni.hideLoading();
		}

	},
	mounted() { },

	computed: {
		toltal() {
			let total = 0;
			this.product.forEach(i => {
				total = total + Number(i.currentskuid.price) * Number(i.num)
			})

			return total
		},
		productnum() {
			let total = 0;
			this.product.forEach(i => {
				total = total + Number(i.num)
			})

			return total
		}
	},

	methods: {
		onClickLeft() {
			uni.removeStorageSync("currentAdress");
			uni.navigateBack();
		},
		clickToAddress() {
			this.navigateTo(
				`/pages/mine/address/address?from=cart&way=${this.routerVal.way}`
			);
		},
		navigateTo(url) {
			uni.navigateTo({
				url,
			});
		},
		async pay(sn) {
			new LiLiWXPay({
				sn: sn,
				price: this.orderMessage.priceDetailDTO.billPrice,
			}).pay();
		},

		handleGoOrder() {

			if (!this.address.id) {
				return uni.showToast({
					icon: 'none',
					title: '请选择地址'
				})
			}

			let arr = [];
			this.product.forEach(item => {
				arr.push({
					num: item.num,
					productId: item.product.id,
					specificationsId: item.currentskuid.id,
					saleId: 0
				})
			})
			userOrder({
				addressId: this.address.id,
				proList: arr,
				userId: storage.getUserInfo().id
			}).then(res => {
				if (res.code == '000000') {
					uni.navigateTo({
						url: `/pages/order/payorder?id=${res.data.orderId}&price=${res.data.price}&from=product`
					})
				}
			})
		}
	},
};
</script>
<style scoped>
page {
	background: #f7f7f7;
}
</style>
<style scoped lang="scss">
.flex-8 {
	flex: 8;
}

.main-color {
	color: $main-color;
	font-weight: bold;
}

.uinput {
	/deep/ input {
		text-align: right;
	}
}

.promotionNotice {
	font-size: 24rpx;
	margin: 20rpx 0;
	color: $aider-light-color;
}

.nums {
	flex: 2;
	color: $light-color;

	text-align: center;
}

.wait {
	font-size: 22rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	color: #cccccc;
	text-align: center;
}

.line {
	margin-left: 14rpx;
	margin-right: 14rpx;
	margin-bottom: 50rpx;
	width: 143rpx;
	border-bottom: 2px dotted #999;
}

.tabbar-left {
	margin-left: 32rpx;
}

.btn-one,
.wait {
	margin-top: 14rpx;
}

.btn-one {
	width: 100rpx;
	height: 40rpx;
	background: $light-color;
	border-radius: 20rpx;
	font-size: 22rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-align: left;
	color: #ffffff;
	text-align: center;
	line-height: 40rpx;
}

.head-img {
	width: 81rpx;
	height: 81rpx;
	margin: 0 auto;
}

.group-title {
	text-align: center;
	font-size: 28rpx;
	font-weight: 400;
	color: $light-color;
}

.group-box {
	height: 242rpx;
	align-items: center;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	background: #fff;
}

.group {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tr {
	text-align: right;
}

.tl {
	text-align: left;
}

/deep/ .u-col-3 {
	text-align: right;
}

.bar {
	height: 4rpx;
	overflow: hidden;
	width: 100%;
	background: url("@/pages/order/imgs/line.png") no-repeat;
}

.box2 {
	margin-top: 20rpx;
}

.notSupportFreight {
	position: fixed;

	bottom: calc(100rpx + env(safe-area-inset-bottom));
	// #ifdef H5
	bottom: 100rpx;
	// #endif
	display: flex;
	align-items: center;
	left: 0;
	background: #fdf6ec;
	height: 100rpx;
	width: 100%;
	transition: 0.35s;

	>.tips {
		margin: 0 32rpx;
	}
}

/deep/ .u-notice-bar-wrap {
	width: 100% !important;
}

.box6 {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	overflow: hidden;
	line-height: 100rpx;
	margin-bottom: 0px !important;
	background: #fff;
	color: #333;
	display: flex;
	justify-content: space-between;
}

.tabbar-right {
	margin-top: 10rpx;
	height: 80rpx;
	color: #fff;
	line-height: 80rpx;
	background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
	padding: 0 44rpx;
	text-align: center;
	border-radius: 400px;
	margin-right: 32rpx;
}

.sp_tag {
	display: inline;
	background: #f2f2f2;
	padding: 0 20rpx 0 10rpx;
	height: 20rpx;
	line-height: 20rpx;
	font-size: 24rpx;
	color: #262626;
	border-radius: 0.4em;
}

.goods-promotion {
	float: left;
	width: 75%;
	margin: 4rpx 0;
}

.sp_tag_plain {
	margin-left: 8rpx;
	padding: 0 6rpx 0 6rpx;
	background: #fff;
	border: 1px solid $main-color;
	font-size: 24rpx;
	color: $main-color;
	border-radius: 50px;
}

.sp_tag_plain:nth-of-type(1) {
	margin-left: 0;
}

.goods-name {
	flex: 8;
	font-size: 28rpx;
}

.sp_type {
	color: $u-tips-color;
	padding: 8rpx 0;
	font-size: 24rpx;
}

.number {
	color: $main-color;
	font-size: 26rpx;
	font-weight: bold;

	>span {
		font-size: 36rpx;
	}
}

.goods-prices {
	margin: 10rpx 0;
	color: $main-color;
	font-size: 28rpx;
	font-weight: bold;

	>.goods-price {
		font-size: 38rpx;
		padding: 0 2rpx;
	}
}

.box {
	border-radius: 40rpx;
	overflow: hidden;
	background: #fff;
	margin-bottom: 20rpx;
	color: #666;
	padding: 0 32rpx;
}

.wrapper {
	height: auto;
	background: #f7f7f7;
	padding-bottom: 200rpx;
	overflow: auto !important;
}

.store-name {
	margin-top: 32rpx;
	font-weight: 400;
	color: #333333;
}

/deep/ .u-col {
	padding: 36rpx 0 !important;
}

/deep/ .u-col-3,
.tipsColor {
	color: #333;
}

.goods-image {
	text-align: left;
	overflow: hidden;
}

.default {
	background: $main-color;
	font-size: 24rpx;
	border-radius: 8rpx;
	padding: 0rpx 12rpx;
	color: #fff;
	margin-right: 20rpx;
}

.address-box {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	overflow: hidden;
	background: #fff;
	margin-bottom: 20rpx;
	color: #666;
	height: 180rpx;
	display: flex;
	align-items: center;
}

.address-item {
	font-weight: normal;
	letter-spacing: 1rpx;
}

.user-box {
	flex: 1;
	height: 100%;
	padding: 0 32rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.loactionimg {
	width: 55rpx;
	height: 55rpx;
	border-radius: 50%;
	background: rgb(254, 146, 0);
	margin-left: 22rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.user-address-detail {
	color: #333;
	font-size: 38rpx;
	font-weight: bold;
	margin: 20rpx 0;
	letter-spacing: 1rpx;
}

.mobile {
	margin-left: 20rpx;
}

.price {
	font-size: 50rpx !important;
	margin: 0 2rpx;
}

.goods-detail {
	display: flex;
	flex-direction: column;

	justify-content: center;
	flex: 8;
	margin-left: 20rpx !important;

	>p {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.goods-item {
	margin: 20rpx 0;
}

.probox {
	width: 100%;
	height: 186rpx;
	margin-top: 21rpx;
	background: #ffffff;
	position: relative;
}

.proboximg {
	width: 137rpx;
	height: 137rpx;
	background: red;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 21rpx;
}

.proname {
	width: 362rpx;
	height: 54rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	line-height: 27rpx;
	position: absolute;
	top: 25rpx;
	left: 178rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.proprice {
	height: 20rpx;
	font-family: Arial;
	font-weight: 400;
	font-size: 21rpx;
	color: #666666;
	line-height: 20rpx;
	position: absolute;
	top: 26rpx;
	right: 26rpx;
}

.proguige {
	height: 25rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 25rpx;
	color: #999999;
	line-height: 25rpx;
	position: absolute;
	left: 178rpx;
	bottom: 60rpx;
}

.buymath {
	width: 100%;
	height: 105rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
}

.mathdiv {
	width: 200rpx;
	height: 27rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 28rpx;
	color: #232323;
	padding-left: 24rpx;
}

.numdiv {
	height: 46rpx;
	font-family: PingFangSC;
	font-weight: 400;
	font-size: 37rpx;
	color: #333333;
	padding-right: 46rpx;
}

.shuom {
	width: 100%;
	height: 214rpx;
	background: #ffffff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	margin-top: 26rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 23rpx;
	color: #666666;
}

.shuomItem {
	width: 100%;

	display: flex;
	justify-content: space-between;
	align-items: center;

	span {
		padding: 12rpx 23rpx 12rpx 23rpx;
	}
}

.zongjie {
	width: 100%;
	height: 105rpx;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	background: #ffffff;
	justify-content: flex-end;
}

.zongjie1 {
	font-family: Source Han Sans CN;
	font-weight: 400;
	font-size: 21rpx;
	color: #666666;
}

.zongjie2 {
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 28rpx;
	color: #f76e00;
	padding-right: 26rpx;
}

.lastdiv {
	width: 100%;
	height: 101rpx;
	font-family: Microsoft YaHei;
	font-weight: 400;
	font-size: 32rpx;
	color: #ffffff;
	text-align: center;
	line-height: 101rpx;
	background: rgb(25, 189, 93);
	position: fixed;
	bottom: 0;
}
</style>
